var canvas1=document.getElementById('cv');
var canvas2=document.getElementById('cb');
var clientWidth = document.documentElement.clientWidth;
var canvas1Width = Math.floor(clientWidth*640/640);
console.log(canvas1Width);
var canvas2Width = Math.floor(clientWidth*640/640);

var clientHidth = document.documentElement.clientHeight;
var canvas1Hidth = Math.floor(clientHidth*447/1136);
var canvas2Hidth = Math.floor(clientHidth*222/1136);
canvas1.setAttribute('width',canvas1Width+'px');
canvas1.setAttribute('height',canvas1Hidth+'px');
canvas2.setAttribute('width',canvas2Width+'px');
canvas2.setAttribute('height',canvas2Hidth+'px');

var context=canvas1.getContext('2d');

var context2=canvas2.getContext('2d');

jq('#cv').on('touchstart',function(ev){
    context.clearRect(0,0,canvas1Width,canvas1Hidth);
    context2.clearRect(0,0,canvas2Width,canvas2Hidth);
    var e=ev.originalEvent.changedTouches[0];
    var x= e.clientX - canvas1.offsetLeft;
    var y= e.clientY - canvas1.offsetTop;


    jq('#cv').on("touchmove.aaa",function(ev){

        var e=ev.originalEvent.changedTouches[0];
        var xn= e.clientX - canvas1.offsetLeft;
        var yn= e.clientY - canvas1.offsetTop;
        ev.originalEvent.preventDefault();
 
        context.strokeStyle='rgba(51,153,255,.5)';

        context.lineWidth=3;
        context.strokeRect(x,y,xn-x,yn-y);

        var img=new Image();
        img.src='img/gr5.jpg';
        img.style.width=canvas1Width+'px';
        img.style.height=canvas1Hidth+'px';
        img.onload=function(){
            var p=context.createPattern(img,'no-repeat');

            context.fillStyle=p;
            context.fillRect(x,y,xn-x,yn-y);

        }

  $('.true_l').on('tap',function(){
  	$(".cbl").hide();
  context.clearRect(0,0,canvas1Width,canvas1Hidth);
  context2.clearRect(0,0,canvas2Width,canvas2Hidth);
  context2.drawImage(img,x,y,Math.abs(xn-x),Math.abs(yn-y),0,0,Math.abs(xn-x),Math.abs(yn-y));
  })      
    });
    $('#cv').on("touchend.aaa",function(ev){
        jq('#cv').off('.aaa');

    });
    $('.true_r').on('tap',function(){

        context2.clearRect(0,0,canvas2Width,canvas2Hidth);
    })
});